import React from 'react';
import classNames from 'classnames';
import { useConfigProvider } from '../mat-config-provider';
import './style/index.less';

export type ButtonProps = {
  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
  plain?: boolean;
  size?: 'mini' | 'small' | 'middle' | 'large';
  block?: boolean;
  disabled?: boolean;
  nativeType?: 'submit' | 'reset' | 'button';
  onClick?: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
  ) => void | Promise<void> | unknown;
  children?: React.ReactNode;
};

export default ({
  type = 'default',
  disabled = false,
  nativeType = 'button',
  onClick,
  children,
}: ButtonProps) => {
  const { prefixCls } = useConfigProvider();

  return (
    <button
      type={nativeType}
      className={classNames(`${prefixCls}-btn`, {
        [`${prefixCls}-status-${type}`]: type,
      })}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
};
